<template>
  <view class="ticket-center-container">
    <e-navbar leftTitle="卡券中心"></e-navbar>
<!--    <u-gap height="15"></u-gap>-->
    <view class="ticket-top">
      <image :src="$image('/images/ticket-top.png')" mode="aspectFill"></image>
      <view class="flex col-center row-between ticket-money">
        <view>卡券余额</view>
        <view class="money-num">{{coupon_balance || "0.00"}}</view>
      </view>
    </view>
    <view class="ticket-content">
      <view class="font-32 pingfang-heavy m-b-28">卡券明细</view>
      <template v-if="ticketList.length === 0">
        <u-gap height="150"></u-gap>
        <u-empty :icon="$image('/images/list-empty.png')" text="暂无明细"></u-empty>
      </template>
      <template v-else>
        <view class="ticket-item" v-for="(item,index) in ticketList" :key="index">
          <view class="flex col-center row-between pingfang-heavy font-28 m-b-12">
            <view>{{item.use_to || "暂无"}}</view>
            <view>{{item.discount.toFixed(2) || 0}}</view>
          </view>
          <view class="flex col-center row-between font-24 text-999">
            <view>{{$u.timeFormat(item.created_at, 'yyyy.mm.dd hh:MM:ss')}}</view>
            <view>卡券</view>
          </view>
        </view>
        <u-loadmore status="nomore" color="#999"/>
        <u-gap height="15"></u-gap>
      </template>
    </view>
  </view>
</template>

<script>

let app = getApp();
export default {
  data() {
    return {
      ticketList: [],
      isLoad:false,
      coupon_balance:"0.00",
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList(){
      const res = await this.$api.coupons_list();
      if(res.code == 1){
        if(res.data.list.length > 0) {
          this.ticketList = res.data.list;
          this.coupon_balance = res.data.discount_total.toFixed(2);
        }
      }
    }
  }
}
</script>
<style>
  page{
    background: #FFF;
  }
</style>
<style lang="scss" scoped>
  .ticket-center-container{
    .ticket-top{
      padding:30rpx 30rpx 80rpx 30rpx;
      position: relative;
      background: #F5F6FA;
      image{
        width: 100%;
        height: 160rpx;
        display: block;
      }
      .ticket-money{
        padding: 0 82rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFC4;
        font-family: 'pingfang-heavy';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-90%);
        width: 100%;
        .money-num{
          font-size: 48rpx;
          color: #FF5945;
        }
      }
    }
    .ticket-content{
      position: relative;
      z-index: 3;
      background: #FFFFFF;
      margin-top: -40rpx;
      padding: 30rpx;
      border-radius: 40rpx 40rpx 0 0;
      .ticket-item{
        background: #F5F6FA;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 16rpx;

      }
    }
  }
</style>
